{% extends 'base.html' %}

{% block title %}个人信息 - 机械臂实验系统{% endblock %}

{% block extra_css %}
<style>
    .profile-container {
        max-width: 800px;
        margin: 30px auto;
    }
    
    .card {
        margin-bottom: 30px;
        border-radius: 10px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    }
    
    .card-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
        padding: 15px 20px;
        font-weight: bold;
    }
    
    .card-body {
        padding: 25px;
    }
    
    .form-control {
        border-radius: 5px;
        padding: 10px;
        margin-bottom: 15px;
    }
    
    .btn-update {
        margin-top: 10px;
    }
    
    .user-role {
        display: inline-block;
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 0.8rem;
        margin-left: 10px;
        color: white;
    }
    
    .role-student {
        background-color: #4CAF50;
    }
    
    .role-teacher {
        background-color: #2196F3;
    }
    
    .role-admin {
        background-color: #F44336;
    }
</style>
{% endblock %}

{% block content %}
<div class="profile-container">
    <h2 class="mb-4">
        个人信息
        {% if user.role == 'student' %}
        <span class="user-role role-student">学生</span>
        {% elif user.role == 'teacher' %}
        <span class="user-role role-teacher">教师</span>
        {% elif user.role == 'admin' %}
        <span class="user-role role-admin">管理员</span>
        {% endif %}
    </h2>
    
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <i class="bi bi-person-badge"></i> 基本信息
                </div>
                <div class="card-body">
                    <form method="post" action="{% url 'profile' %}">
                        {% csrf_token %}
                        <input type="hidden" name="update_profile" value="true">
                        
                        <div class="mb-3">
                            <label for="{{ profile_form.username.id_for_label }}" class="form-label">用户名</label>
                            {{ profile_form.username }}
                            {% if profile_form.username.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ profile_form.username.errors }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="mb-3">
                            <label for="{{ profile_form.email.id_for_label }}" class="form-label">电子邮箱</label>
                            {{ profile_form.email }}
                            {% if profile_form.email.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ profile_form.email.errors }}
                                </div>
                            {% endif %}
                        </div>
                        
                        {% if user.role == 'student' and user.student_id %}
                            <div class="mb-3">
                                <label class="form-label">学号</label>
                                <input type="text" class="form-control" value="{{ user.student_id }}" disabled>
                            </div>
                        {% elif user.role == 'teacher' and user.teacher_id %}
                            <div class="mb-3">
                                <label class="form-label">教师编号</label>
                                <input type="text" class="form-control" value="{{ user.teacher_id }}" disabled>
                            </div>
                        {% endif %}
                        
                        <button type="submit" class="btn btn-primary btn-update">更新信息</button>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <i class="bi bi-key"></i> 修改密码
                </div>
                <div class="card-body">
                    <form method="post" action="{% url 'profile' %}">
                        {% csrf_token %}
                        <input type="hidden" name="change_password" value="true">
                        
                        <div class="mb-3">
                            <label for="{{ password_form.current_password.id_for_label }}" class="form-label">当前密码</label>
                            {{ password_form.current_password }}
                            {% if password_form.current_password.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ password_form.current_password.errors }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="mb-3">
                            <label for="{{ password_form.new_password.id_for_label }}" class="form-label">新密码</label>
                            {{ password_form.new_password }}
                            {% if password_form.new_password.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ password_form.new_password.errors }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="mb-3">
                            <label for="{{ password_form.confirm_password.id_for_label }}" class="form-label">确认新密码</label>
                            {{ password_form.confirm_password }}
                            {% if password_form.confirm_password.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ password_form.confirm_password.errors }}
                                </div>
                            {% endif %}
                        </div>
                        
                        {% if password_form.non_field_errors %}
                            <div class="alert alert-danger">
                                {% for error in password_form.non_field_errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                        
                        <button type="submit" class="btn btn-primary btn-update">更新密码</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}